<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入vue2.x：开发环境版本，包含了有帮助的命令行警告-->
    <script src="/static/resource/js/cdn.bootcdn.net_ajax_libs_vue_2.7.14_vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入echarts -->
{#    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>#}
    <script src="/static/js/cdn.bootcdn.net_ajax_libs_echarts_5.4.2_echarts.min.js"></script>
{#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>#}
    <script src="/static/js/cdn.bootcdn.net_ajax_libs_jquery_2.2.4_jquery.min.js"></script>
    <!--引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--bootstrap图标库-->
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css">

    {% block head_block %}
        <title>common</title>
    {% endblock head_block %}

    <style>
        html {
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
        }

        body {
            background: linear-gradient(to bottom, #055074 40%, #022f4b 60%);
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body style="margin: 0; padding: 0;height: 100vh;width: 100vw">

<script>
    // 非发布版本会提示用户（应该使用发布版本发布），这里关掉提示
    Vue.config.productionTip = false;
    Vue.config.delimiters = ['{[', ']}']; // 这东西p用没有啊
</script>

<script>
    // 补零函数，用于确保单个数字两位数显示
    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }

    function getTime() {
        // 创建一个 Date 对象
        let currentDate = new Date();
        // 获取年、月、日、小时、分钟、秒、星期几
        let year = currentDate.getFullYear();
        let month = currentDate.getMonth() + 1; // 月份从 0 开始，需要加 1
        let day = currentDate.getDate();
        let hours = currentDate.getHours();
        let minutes = currentDate.getMinutes();
        let seconds = currentDate.getSeconds();
        let dayOfWeek = currentDate.getDay(); // 星期几，0 表示星期日
        // 定义星期几的中文表示数组
        var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        // 格式化为指定形式的字符串
        let formattedDate = year + '年' + padZero(month) + '月' + padZero(day) + '日 ' + weekdays[dayOfWeek] + ' ' + padZero(hours) + ':' + padZero(minutes) + ':' + padZero(seconds);
        return formattedDate;
    }

    setInterval(function () {
        let formattedDate = getTime();
        document.getElementById('time_block').innerText = formattedDate;
    }, 1000)

</script>

<div style="height: 100%;width: 100%;display: flex;flex-direction: column;color: #FFFFFF;text-align: center;margin: 0;padding: 0">
    <!--
    <div style="font-size: 25px;margin: 10px auto 0;">
        舆情系统数据分析（数据大屏）
    </div>
    -->
    <div style="width: 100vw;height: 12vh">
        <div style="width: 500px; text-align:center;font-size: 25px;position: absolute; top: 10px; left: calc(50vw - 200px)">
            舆情系统数据分析（{% block name_block %}数据大屏{% endblock name_block %}）
        </div>

        <div style="width: 100vw;display: flex;justify-content: center">
            <img src="/static/resource/pics/upLine.png" alt="">
        </div>
        <img src="/static/resource/pics/school.png" alt=""
             style=";position: relative; right: 43vw;top: -2vh">
        <div id="time_block" style="position:relative; right: -81vw;top:-6vh; width: 250px"></div>
    </div>
    {% block body_block %}
    {% endblock body_block %}
</div>

</body>
</html>